/**
 * Created by Administrator on 2016/10/13 0013.
 */
$(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    //--------------
    //- AREA CHART -
    //--------------

    // Get context with jQuery - using jQuery's .get() method.



    var areaChartOptions = {
        //Boolean - If we should show the scale at all
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(#00c0ef)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - Whether the line is curved between points
        bezierCurve: true,
        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.3,
        //Boolean - Whether to show a dot for each point
        pointDot: false,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius: 20,
        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,
        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,
        //Boolean - Whether to fill the dataset with a color
        datasetFill: true,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true
    };



    //-------------
    //- LINE CHART1 -
    //--------------
    var areaChartData1 = {
        labels: ["7:00", "7:30",
            "8:00", "8:30",
            "9:00", "9:30",
            "10:00","10:30",
            "11:00","11:30",
            "12:00","12:30",
            "13:00", "13:30",
            "14:00", "14:30",
            "15:00", "15:30",
            "16:00", "16:30",
            "17:00", "17:30",
            "18:00", "18:30",
            "19:00"],
        datasets: [
            {
                label: "Electronics",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(60,141,188,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [1, 9, 0, 1, 6, 5, 4,4,12,7,9, 0, 1, 6, 5, 4,4,5,7,8, 6, 5, 4,4,5]
            }
        ]
    };
    var lineChartCanvas = $("#lineChart1").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas);
    var lineChartOptions = areaChartOptions;
    lineChartOptions.datasetFill = false;
    lineChart.Line(areaChartData1, lineChartOptions);

    //-------------
    //- LINE CHART2 -
    //--------------
    var areaChartData2 = {
        labels: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
        datasets: [
            {
                label: "Electronics",
                fillColor: "rgba(255,255,255,0.9)",
                strokeColor: "rgba(255,0,0,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(255,0,0,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [1, 9, 0, 1, 6, 5, 4]
            }
        ]
    };
    var lineChartCanvas2 = $("#lineChart2").get(0).getContext("2d");
    var lineChart2 = new Chart(lineChartCanvas2);
    var lineChartOptions2 = areaChartOptions;
    lineChartOptions2.datasetFill = false;
    lineChart2.Line(areaChartData2, lineChartOptions2);



    //-------------
    //- LINE CHART3 -
    //--------------
    var areaChartData3 = {
        labels: ["1","2","3","4","5",
            "6","7","8","9","10",
            "11","12","13","14","15",
            "16","17","18","19","20",
            "21","22","23","24","25",
            "26","27","28","29","30"],
        datasets: [
            {
                label: "Electronics",
                fillColor: "rgba(255,255,255,0.9)",
                strokeColor: "rgba(255,165,0,0.8)",
                pointColor: "#f39c12",
                pointStrokeColor: "rgba(255,0,0,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [1, 9, 0, 1, 6, 5, 4, 0, 1, 6, 5, 4, 0, 1, 6, 5, 4, 0, 1, 6, 5, 4,0, 1, 6, 5, 4,6, 5, 4]
            }
        ]
    };
    var lineChartCanvas3 = $("#lineChart3").get(0).getContext("2d");
    var lineChart3 = new Chart(lineChartCanvas3);
    var lineChartOptions3 = areaChartOptions;
    lineChartOptions3.datasetFill = false;
    lineChart3.Line(areaChartData3, lineChartOptions3);

    //-------------
    //- LINE CHART4 -
    //--------------
    var areaChartData4 = {
        labels: ["一月","二月","三月","四月","五月", "六月",
            "七月","八月","九月","十月", "十一月","十二月"],
        datasets: [
            {
                label: "Electronics",
                fillColor: "rgba(255,255,255,0.9)",
                strokeColor: "rgba(0,255,0,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(255,0,0,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [1, 9, 0, 1, 6, 5, 4, 0, 1, 6, 5, 4, 0]
            }
        ]
    };
    var lineChartCanvas4 = $("#lineChart4").get(0).getContext("2d");
    var lineChart4 = new Chart(lineChartCanvas4);
    var lineChartOptions4 = areaChartOptions;
    lineChartOptions4.datasetFill = false;
    lineChart4.Line(areaChartData4, lineChartOptions4);
});